<template>
  <div class="postdetail">
    <postPanel :is-comment="isComment"/>
    <el-tooltip placement="top" effect="light" :content="isComment?'关闭评论':'打开评论'"><div class="comment-contral" @click="turnTo('#comment')"><span><el-icon :size="20"><IconPark :icon="Topic"/></el-icon></span></div></el-tooltip>  
  </div>
</template>

<script setup lang="ts">
import postPanel from "./cpns/post-panel.vue";
import IconPark from "@components/IconPark.vue";
import { Topic } from "@icon-park/vue-next";
import { ref } from "vue";

const isComment = ref<boolean>(false);

const turnTo = (select:string) => {
    isComment.value = !isComment.value;
    if(isComment.value) {
       setTimeout(()=>{
        document.querySelector(select)?.scrollIntoView({
        behavior: "smooth",
       })
    });
    }
}

</script>

<style scoped lang="less">
.postdetail {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .comment-contral {
    width: 40px;
    height: 40px;
    background-color: #f5f7fa;
    position: absolute;
    right: 80px;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    cursor: pointer;
    color: #2a97d1;
    border: 1px solid #d8dce5;
  }
}
</style>
